<!--
 * @Author: Jackie
 * @Date: 2021-01-03 15:40:56
 * @LastEditors: Jackie
 * @LastEditTime: 2021-01-05 21:21:59
 * @Description: 组件-专利申请情况
 * @FilePath: \VisualProject\temp-project\src\components\PatentApplySatus.vue
-->
<template>
<div class="ApplyStatus">
    <div class="header">专利申请情况</div>
    <div class="tab">
        <table>
                  <tr>
                      <th v-for='(item,ind) in columnList' :key="ind">{{item}}</th>
                  </tr>
                  <tr v-for='(item,index) in inforList' :key="index" class="ApplyStatusChart">
                      <td  v-for='(it,ind) in columnList' :key="ind">{{item[it]}}</td>
                  </tr>
            </table>
    </div>
</div>
  
</template>

<script>
const echarts = require('echarts');
export default {
    data(){
        return{
            colorList:['#3AFF24','#3194F3','#F8672F','#A42CEC','#23FFC9','#FF27BE','#FEFC22'],
            columnList: ['板块', '已申请','目标'],
            inforList: [
                    {'板块': '电力板块', '已申请': 35, '目标': 80},
                    {'板块': '石油板块', '已申请': 0,  '目标': 10},
                    {'板块': '煤炭板块', '已申请': 11, '目标': 10},
                    {'板块': '天然气板块', '已申请': 35, '目标': 20},
                    {'板块': '可再生板块', '已申请': 0, '目标': 10},
                    {'板块': '科服板块', '已申请': 57, '目标': 80},
                    {'板块': '西北分公司', '已申请': 0, '目标': 10},
                    ],
        }
    },
    mounted(){
      this.ApplyStatus()//table里插入div，仿制条形图
      this.addIcon()
      },
    methods:{
        ApplyStatus(){
            const ApplyStatusChart=document.querySelectorAll('.ApplyStatusChart')
            ApplyStatusChart.forEach((item,index)=>{
                const color=this.colorList[index]
                const num=this.inforList[index]['已申请']
                const target=this.inforList[index]['目标']
                let tmpdate=(num*1.0/target*100)
                if(tmpdate >= 100 ){tmpdate=100}
                else if(tmpdate==0){tmpdate=5}
                else{tmpdate}
                console.log(tmpdate);
                const myChart=echarts.init(item.childNodes[1]);
                const option = {
                    xAxis: {
                            max: 100,
                            splitLine: {show: false},
                            axisLine: {show: false},
                            axisLabel: { show: false},
                            axisTick: { show: false}
                        },
                        grid: {
                            left: 32,
                            top: 0,
                            bottom: -5,
                        },
                        yAxis: [{
                            // show : false,
                            type: "category",
                            data: [num],
                            inverse: false,
                            axisLine: {show: false},
                            axisTick: {show: false},
                            axisLabel: {show: false}
                        }],
                        series: [{
                                // 内
                                type: "bar",
                                barWidth: 12,
                                legendHoverLink: false,
                                silent: true,
                                itemStyle: {
                                    normal: {color: color}
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: "left",
                                        formatter: "{b}",
                                        textStyle: {
                                            color: "#fff",
                                            fontSize: 16,
                                            fontWeight:'lighter',
                                        }
                                    }
                                },
                                data: [tmpdate],
                                z: 1,
                                animationEasing: "elasticOut"
                            },
                            {
                                // 分隔
                                type: "pictorialBar",
                                itemStyle: {normal:{color:"#1e1d3c"}},
                                symbolRepeat: "fixed",
                                symbolMargin:1.5,
                                symbol: "rect",
                                symbolClip: true,
                                symbolSize: [3, 20],
                                symbolPosition: "start",
                                symbolOffset: [0,1],
                                symbolBoundingData: 100,
                                data: [tmpdate],
                                z: 2,
                                animationEasing: "elasticOut"
                            },
                        
                        ]
                    };

                myChart.setOption(option);             
            }) 
        } ,
        addIcon(){
            const ApplyStatusChart=document.querySelectorAll('.ApplyStatusChart')
            
            let plate=''
            ApplyStatusChart.forEach((item,index)=>{
                const tmpColor=this.colorList[index]
                plate=this.inforList[index]['板块']
                // console.log(plate);
                const tmpli=item.childNodes[0]
                tmpli.innerHTML=`
                <div style="
                width:5px;height:5px;border-radius:50%;background:${tmpColor};
                border:none;
                box-shadow:0px 0px 10px${tmpColor};
                margin-right:5px
                "></div>
                <div>${plate}</div>
                `
            })
        }
    }
}
</script>

<style lang="less" scoped>
.ApplyStatus{
    width: 360px;
    height: 369px;
    border-radius: 10px;
    background-color: var(--bgc--);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .header{
        width: 312px;height: 48px;
        border-bottom: 2px solid black;
        text-align: start;
        line-height: 48px;
        color: var(--textColor--);
        padding-left: 10px;
        font-family: "NotoSansHans-Light";
        font-weight: 300;
        font-size: 21px;
    }
    .tab{
        width: 312px;height: 300px;
        padding-top: 5px;
    table{
        width:100%;height: 100%;
        
    }
    th{
         color: var(--textColor--);
         text-align: start;
         font-family: "NotoSansHans-Light";
         font-weight: 300;
         font-size: 18px;
    }
    td{
        padding: 0 10px;
        text-align: start;
        font-size: 16px;
    }
    td:nth-child(2){//第2列
        width:120px;
        }
    td:nth-child(1){//第1列
        text-align: start;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        // padding-top: 5px;
        }
    }
    
}
</style>